Skip to content

Latest commit

 

History

History
executable file
·
164 lines (142 loc) · 4.8 KB

2.Grid settings(中).markdown

File metadata and controls

executable file
·
164 lines (142 loc) · 4.8 KB

2.Grid settings(中)

上個章節講了Susy2的簡易設定方式, 接著我們來看它預設的全域設定

##youtube影片教學

Global Defaults

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 4,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

只要你載入了Susy2以後, 上面的Global Defaults就會自動載入, 接著我再來針對一些我個人常用的設定來進行解說

flow

預設:ltr
選項:ltrrtl

Susy2預設是用float:left從左到右來排列Grid,
而susy1也是一樣,
如果你希望你的欄是從右邊排到左邊, 再把設定改為rtl即可。

container

預設:auto
選項:可自行設定grid的寬度,例:960px60em

container可以直接寫Grid的總寬度進去,
他會依照你columnsgutters的設定,
自動算出數值, 所以如果你不想要透過column-width來算出總寬的話,
那也可以使用container的功能。

container-position

預設:center
選項:leftcenterright<length>

預設是center,也就是讓你的Grid水平置中,
leftright則是可讓你的Grid靠左或靠右對齊,
length則是自己寫一個自訂數值,
這樣你的margin-left、與margin-right則會改為你的數值。

global-box-sizing

預設:content-box
選項:content-boxborder-box

這個設定有點像是你告訴Susy2你的版型是用哪種方式排版的, 如果你選擇border-box的話,
那就還必須在你的SASS裡面加上Susy2的Mixin@include border-box-sizing;
也就是如下程式碼:

$susy: (
  global-box-sizing: border-box 
  );
@include border-box-sizing;
//編譯出來的CSS
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
}

如果你是使用預設的content-box的話,
gutter-position:inside、inside-static的設定來排版的時候,
你會發現用span編譯出來的程式碼,
都會加上box-sizing:border-box的設定,
這會造成語法太多造成CSS量變得太大,
但如果你設定你的設定是border-box的話,
就不會編譯出這些code,
因為*, *:before, *:after所代表的意思就是所有元素都可以吃到這設定,
這樣編譯出來的code也乾淨多了。

但這裡的原理我個人認為還蠻重要的,
這跟盒模型(Box Model)有關, 瀏覽器預設都是content-box的設定, 也就是如果你今天有個div設定寬50px後, 但又下了padding-left:10px與padding-right:10px後
該div會變成70px,
所以有些設計師在使用Grid的時候,
因為不懂content-box的原理,
導致欄變寬,就變成不是依照比例去排,
例如下圖都是一欄的寬度,

但如果在黑色的div推擠了左右padding,就不符比例,

這問題在以前也相當困擾網頁設計師,
直到CSS3多了box-sizing的語法,
在susy2的文件也有介紹到,
他提到如果你的網頁只要兼容到IE8以上,
建議你可以在reset.css上加上這行,

*, *:before, *:after {
  box-sizing: inherit;
}

這樣子你的盒模型只要設定一個寬度,
不管你是用padding或border,
他的寬度就都不會受到影響了。

我自己是都習慣用box-size: border-box了,
但如果你的客源都還是必須兼容ie7以下,
那就沒辦法使用這個設定了。

###last-flow 預設:to
選項:tofrom

預設是to的情況下, 寫了下面的語法,
.content就會變成與float:right,
如果改成from的話,則會變成float:left, 如果你的gutter-position設定成afterbefore的話,
那就可能有機會會改到這個設定, PS:這裡的last就等於susy1的omega

.content{
  @include span(1 last)
}

###use-custom clearfix 預設:false
選項:truefalse

Susy2會自動抓取compass預設的clearfix的mixin,
但如果你不希望Susy2使用compass的clearfix,
你可以在這設定寫true後,
自己寫一個名稱為clearfix的mixin, Susy2會優先抓取你的mixin設定


下一章節會再來針對debug模式,
搭配compass vertical rhythm來做詳細的解說。